<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频演示demo</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=91a897b1bf33a705798eaab9391d2496"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

</head>

<body >
<div id="container"></div>
<!-- 模态框（Modal） -->
<div class="modal fade modal-dialog" id="myModal" tabindex="-1"  data-backdrop="static" role="dialog" aria-labelledby="myModalLabel"  style="width:1100px" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="deleteWindow()">&times;</button>
                <h4 class="modal-title" id="myModalLabel">车载监控查看</h4>
            </div>
                <div  class="modal-body plugin" >
                    <div id="text">
                        <div id="cmsv6flash"></div>
                    </div>
                    <div id="huabu" style="width: 100px;height: 100px"></div>
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label class="sr-only" for="time">录像时间</label>
                            <input type="text" class="form-control" id="time" placeholder="请选择时间">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary btn-sm"  id="sou">录像查询</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary btn-sm" onclick="playLiveVideo()" >实时视频</button>
                            <button type="button" class="btn btn-primary btn-sm" onclick="stopLiveVideo()">停止</button>
                        </div>
                    </form>
                    <div>
                        <table id="table"></table>
                    </div>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="deleteWindow()">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div id="tip"></div>
</body>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="http://120.25.214.26/js/lhgdialog.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" th:src="@{/js/video/swfobject.js}"></script>
<script type="text/javascript" th:src="@{/js/video/video.js}"></script>
<script type="text/javascript" th:src="@{/js/video/play.js}"></script>
<script src="https://cdn.bootcss.com/three.js/92/three.min.js " ></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.0.3/sockjs.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script th:src="@{../js/vendor/OrbitControls.js}"></script>
<script th:src="@{../js/vendor/OBJLoader.js}"></script>
<script th:src="@{../js/vendor/geometry.js}"></script>
<script>
    const video=[{name:"测试一号车",ip:'183.158.236.98'},{name:"测试二号车",ip:'183.158.236.98'}];
    var marker=null;
    const map = new AMap.Map('container', {
        resizeEnable: true,
    });
    //http://120.25.214.26:6604/3/5?DownType=2&jsession=57e55419-9e71-4378-be87-dc5a614cb6ef&DevIDNO=50960&LOC=2&CHN=-1&YEAR=2018&MON=6&DAY=11&RECTYPE=-1&FILEATTR=2&BEG=0&END=86399&ARM1=0&ARM2=0&RES=0&STREAM=0&STORE=0
/*    var geolocation;
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
       map.addControl(geolocation);
        geolocation.getCurrentPosition();
        // 构造点标记
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });*/

    login('xinpai','000000');
</script>
<script>
    //document.getElementById( 'newWindow' ).href += window.location.hash;
    width = 100;    //获得标签为canvas-frame宽度
    height = 100;  //获得标签为canvas-frame高度

    //var gui = new dat.GUI();
    var scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 50, width / height, 0.1, 50 );
    camera.position.z = 30;
    camera.position.y = -15;

    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width, height );
    renderer.setClearColor( 0x000000, 1 );
    document.getElementById('huabu').appendChild(renderer.domElement);//将画布添加到标签中
/*    document.body.appendChild( renderer.domElement );*/

    var orbit = new THREE.OrbitControls( camera, renderer.domElement );
    orbit.enableZoom = false;

    var lights = [];
    lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
    lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
    lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

    lights[ 0 ].position.set( 0, 200, 0 );
    lights[ 1 ].position.set( 100, 200, 100 );
    lights[ 2 ].position.set( - 100, - 200, - 100 );

    scene.add( lights[ 0 ] );
    scene.add( lights[ 1 ] );
    scene.add( lights[ 2 ] );

    group = new THREE.Group();

    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [], 3 ) );

    var lineMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5 } );
    var meshMaterial = new THREE.MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true } );

    group.add( new THREE.LineSegments( geometry, lineMaterial ) );
    group.add( new THREE.Mesh( geometry, meshMaterial ) );
    //console.log(group);
    var options = chooseFromHash( group );
    console.log(options);
    scene.background = new THREE.Color( 0xf0f0f0 );
    scene.add( group );
    var render = function () {
        //requestAnimationFrame( render );
        //group.rotation.y += 0.005;
        /*
        if ( ! options.fixed ) {

            //group.rotation.x += 0.005;
            group.rotation.y += 0.005;

        }
        */
        renderer.render( scene, camera );

    };

    window.addEventListener( 'resize', function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }, false );

    render();
</script>
<script>
    function connect() {
        const socket = new SockJS('/endpointSang');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.send("/welcome", {},null);//5
            stompClient.subscribe('/topic/mpu6050', function (response) {
                let devic=JSON.parse(response.body);
                let data=JSON.parse(devic.body).data;
                if(data.angle!=null){
                    /*                    cube.rotation.x =data.angle[0] ;
                                        cube.rotation.y = data.angle[1];*/
                    group.rotation.x =data.angle[0]*Math.PI/180 ;
                    group.rotation.y = data.angle[1]*Math.PI/180 ;
                    group.rotation.z =data.angle[2]*Math.PI/180 ;
                    render();
                }
            });
        });
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
    }
</script>
</html>